<template>
    <view class="leaderboard">
        <image class="phbbj" src="https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/06/16518385846487186dbe3af9217a4e4061c593acb4ae.png"
            mode="widthFix"></image>
        <view class="top top1" v-if="rankList[0]">
            <image class="touxiang" :src="rankList[0].avatar" mode="widthFix"></image>
            <view class="name">{{rankList[0].name}}</view>
            <view class="vh-c">
                <view class="jifenbox">
                    <image class="jifen" src="../../static/imgs/jifen.png" mode="widthFix"></image>
                    <view class="jifentext">{{rankList[0].totalPoints?rankList[0].totalPoints:0}}元</view>
                </view>
            </view>
        </view>
        <view class="top top2" v-if="rankList[1]">
            <image class="touxiang" :src="rankList[1].avatar" mode="widthFix"></image>
            <view class="name">{{rankList[1].name}}</view>
            <view class="vh-c">
                <view class="jifenbox">
                    <image class="jifen" src="../../static/imgs/jifen.png" mode="widthFix"></image>
                    <view class="jifentext">{{rankList[1].totalPoints?rankList[1].totalPoints:0}}元</view>
                </view>
            </view>
        </view>
        <view class="top top3" v-if="rankList[2]">
            <image class="touxiang" :src="rankList[2].avatar" mode="widthFix"></image>
            <view class="name">{{rankList[2].name}}</view>
            <view class="vh-c">
                <view class="jifenbox">
                    <image class="jifen" src="../../static/imgs/jifen.png" mode="widthFix"></image>
                    <view class="jifentext">{{rankList[2].totalPoints?rankList[2].totalPoints:0}}元</view>
                </view>
            </view>
        </view>

        <view class="tabtitle vh-cb" v-if="rankList.slice(2,rankList.length-1).length>0">
            <view class="vh-c">排名</view>
            <view class="vh-cs">用户</view>
            <view class="vh-c">收益</view>
        </view>

        <view class="u-page">
            <!-- <u-list @scrolltolower="scrolltolower" :preLoadScreen='preLoadScreen*2.5'> -->
                <u-list-item v-for="(item, index) in rankList.slice(3,rankList.length)" :key="index"> 
                    <view class="renItem vh-cb">
                        <view class="remindex vh-c">{{4+index}}</view>
                        <view class="renBox vh-cs">
                            <image src="../../static/imgs/money.png" mode="aspectFit"></image>
                            <view>{{item.name}}</view>
                        </view>
                        <view class="shouyi vh-c">
                            <image src="../../static/imgs/money.png" mode="aspectFit"></image>
                            <view class="num">{{item.totalPoints?item.totalPoints:0}}</view>元
                        </view>
                    </view>
                </u-list-item>
                <!-- <u-loadmore :status="status" :fontSize="30" /> -->
            <!-- </u-list> -->
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            indexList: [],
            urls: [
                'https://cdn.uviewui.com/uview/album/1.jpg',
                'https://cdn.uviewui.com/uview/album/2.jpg',
                'https://cdn.uviewui.com/uview/album/3.jpg',
                'https://cdn.uviewui.com/uview/album/4.jpg',
                'https://cdn.uviewui.com/uview/album/5.jpg',
                'https://cdn.uviewui.com/uview/album/6.jpg',
                'https://cdn.uviewui.com/uview/album/7.jpg',
                'https://cdn.uviewui.com/uview/album/8.jpg',
                'https://cdn.uviewui.com/uview/album/9.jpg',
                'https://cdn.uviewui.com/uview/album/10.jpg',
            ],
            status: 'loadmore',
            preLoadScreen: 0,
            rankList:[]
        }
    },
    onLoad() {
        let that = this
        // this.loadmore()
        this.getpaihang()
    },
    methods: {

        getpaihang() {
            this.$http.get('/app/rank').then(val => {
                this.rankList = val.data
                console.log(this.rankList)
                
            })
        },
        scrolltolower() {
            this.loadmore()
        },
        loadmore() {
            console.log('jiazai')
            this.preLoadScreen++
            if (this.preLoadScreen < 4) this.status = 'loading';
            else {
                this.status = 'nomore'; return
            }
            for (let i = 0; i < 20; i++) {
                this.indexList.push({
                    url: this.urls[uni.$u.random(0, this.urls.length - 1)]
                })
            }
        },
    }
}
</script>
<style lang="scss">
.leaderboard {
    background-color: #fff;
    background-size: 100%;
    min-height: 100vh;
    position: relative;
    /* padding: 32rpx; */
    .phbbj {
        width: 100vw;
        // height: auto;
    }
    .touxiang{
        
            width: 13vw;
            height: 13vw !important;
        border-radius: 50%;
    }
    .top1 {
        background: url("../../static/imgs/top1.png") no-repeat;
        left: 37vw;
        top: 8.5vw;
    }
    .top2 {
        background: url("../../static/imgs/top2.png") no-repeat;
        left: 6vw;
        top: 13.5vw;
    }
    .top3 {
        background: url("../../static/imgs/top3.png") no-repeat;
        left: 68vw;
        top: 13.5vw;
    }
    .top {
        position: absolute;
        min-height: 100rpx;
        background-size: 100%;
        width: 26vw;

        image {
            width: 13vw;
            height: 13vw;
            margin: 3.6vw 0 6vw 6.5vw;
        }
        .name {
            font-size: 30rpx;
            font-weight: 600;
            color: #ffffff;
            line-height: 42rpx;
            text-align: center;
            margin-bottom: 30rpx;
        }
        .jifenbox {
            border-radius: 180rpx;
            background-color: rgba($color: #fff, $alpha: 0.2);
            padding: 5rpx 15rpx;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            .jifen {
                margin: 0;
                width: 24rpx;
                height: 24rpx;
            }
            .jifentext {
                margin-left: 10rpx;
                font-size: 22rpx;
                font-weight: 600;
                color: #ffffff;
                // line-height: 30rpx;
            }
        }
    }
    .tabtitle {
        font-size: 24rpx;
        font-weight: 400;
        color: #788394;
        line-height: 33rpx;
        view:nth-child(1) {
            width: 15%;
            padding-top: 20rpx;
        }
        view:nth-child(2) {
            width: 65%;
            padding: 20rpx 100rpx 0;
        }
        view:nth-child(3) {
            width: 20%;
            padding-top: 20rpx;
        }
    }
    .renItem {
        padding: 40rpx;
        .renBox {
            width: 65%;
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
            line-height: 42rpx;
            image {
                border-radius: 50%;
                width: 50rpx;
                height: 50rpx;
                border: 2rpx solid #cbcbcb;
                margin-right: 13rpx;
            }
        }
        .remindex {
            margin-right: 20rpx;
        }
        .shouyi {
            // width: 20%;
            font-size: 22rpx;
            font-weight: 400;
            color: #788394;
            line-height: 33rpx;
            image {
                margin-right: 10rpx;
                width: 30rpx;
                height: 30rpx;
            }
            .num {
                font-size: 40rpx;
                font-weight: bold;
                color: #ff9f16;
                line-height: 47rpx;
                margin-right: 10rpx;
            }
        }
    }
}
</style>